import { putUserApi } from "@/services/user";

import { FC } from "react";
import { checkUsername } from "../../../utils/validator";

import { Modal, Form, Button, Input, message } from "antd";
import QfUpload from "@/components/qfUpload";

type UserEditStateType = {
  state: boolean;
  row: Partial<USER.Item>;
  // ....
};
interface Props {
  userEditState: UserEditStateType;
  setUserEditState: (data: UserEditStateType) => void;
  onTableData: Function;
}
const Index: FC<Props> = ({ userEditState, setUserEditState, onTableData }) => {
  const [form] = Form.useForm();

  const onFinish = async (formData: USER.PostUserPayloadType) => {
    // console.log(1111, formData);
    const { state, msg } = await putUserApi({
      ...formData,
      user_id: userEditState.row.user_id as number,
    });

    if (state === 200) {
      // 刷新获取最新
      onTableData();
      // 关闭对话
      setUserEditState({
        ...userEditState,
        state: false,
      });
    } else {
      message.error(msg);
    }
  };

  return (
    <Modal
      title="用户编辑"
      open={userEditState.state}
      onOk={() => form.submit()}
      onCancel={() => setUserEditState({ ...userEditState, state: false })}
    >
      {/* 表单 */}
      <Form
        size="large"
        labelCol={{ span: 4 }}
        onFinish={onFinish}
        form={form}
        initialValues={userEditState.row}
      >
        <Form.Item name="card_number" label="会员卡号">
          <Input placeholder="请输入卡号"></Input>
        </Form.Item>
        {/* <Form.Item name="11111" label="*用户名"> */}
        <Form.Item
          name="username"
          label="用户名"
          rules={[
            { required: true, message: "用户名必须" },
            { validator: checkUsername },
          ]}
        >
          <Input placeholder="请输入用户名"></Input>
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[{ required: true, message: "1111" }]}
        >
          <Input placeholder="请输入密码"></Input>
        </Form.Item>
        <Form.Item label="头像">
          <QfUpload />
        </Form.Item>
        <Form.Item name="address" label="地区">
          <Button type="default">地图选点</Button>
        </Form.Item>
        {/* <Form.Item>
          <Button
            type="primary"
            style={{ marginLeft: "90px" }}
            htmlType="submit"
          >
            立即编辑
          </Button>
        </Form.Item> */}
      </Form>
      {/* 表单 */}
    </Modal>
  );
};

export default Index;
